<template>
  <el-card>
    <div>
      <!-- 1.0 查询 -->
      <search @openSuggest="openSugg" @searchData="getDataNew" />

      <!-- 2.0 数据表格 -->
      <Table :dataarr="tableData" />

      <!-- 分页 -->
      <el-pagination
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>

    <!-- 添加建议面板 -->
    <el-dialog title="投诉/建议" :visible.sync="suggestVisi" width="30%">
      <el-form
        ref="suggestFormRef"
        :model="suggestForm"
        :rules="suggestFormRule"
        class="demo-ruleForm"
      >
        <!-- 编辑 -->
        <el-form-item prop="content">
          <el-input v-model="suggestForm.content" type="textarea"></el-input>
        </el-form-item>

        <!-- 文件上传 -->
        <el-row>
          <el-col>
            <el-form-item prop="content">
              <el-upload
                class="upload-demo"
                action="http://106.53.45.41:9509/qiniu/fileupload?prefix=seller"
                :on-success="successPic"
                :limit="3"
              >
                <el-button size="mini" type="primary" style="transform: translateY(2px);">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">* 请复制主图链接或上传主图</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item prop="tel">
              <p>如有需要可以上传问题截图帮助说明（图片小于3M）</p>
              <el-input v-model="suggestForm.tel" placeholder="*请输入您的联系方式" size="mini"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="suggestVisi = false">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
import Search from './components/Search.vue'
import Table from './components/Table.vue'
export default {
  components: {
    Search,
    Table
  },
  data() {
    return {
      pageNum: 0,
      pageSize: 5,
      total: 0,
      tableData: [],
      suggestVisi: false,
      suggestForm: {
        content: '',
        tel: '',
        imgUrl: ''
      },
      suggestFormRule: {
        content: [{ required: true, message: '请输入建议', trigger: 'blur' }],
        tel: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
      },

      // 查询信息
      searchInfo: {
        beginDate: '',
        endDate: '',
        isReplay: 0,
        questionTelephone: '',
        sellerPhone: '',
        keyword: ''
      }
    }
  },
  created() {
    this.getsugesstionData()
  },
  methods: {
    async getsugesstionData() {
      const { data } = await this._axios.post(
        `/suggest/findpagebyparam?page=${this.pageNum}&size=${this.pageSize}`,
        this.searchInfo
      )
      // console.log(data.dataList)
      this.tableData = data.dataList
      this.total = data.totalCount
    },
    handleSizeChange(n) {
      this.pageSize = n
      this.getsugesstionData()
    },
    handleCurrentChange(n) {
      this.pageNum = n
      this.getsugesstionData()
    },
    openSugg(bool) {
      this.suggestVisi = true
    },
    successPic(res) {
      this.suggestForm.imgUrl = res.resultObj.rootUrl
    },
    getDataNew(o) {
      this.searchInfo.isReplay = parseInt(o.isReaply)
      this.searchInfo.keyword = o.keywords
      console.log(o)
      console.log(this.searchInfo)
      this.getsugesstionData()
    },
    addSubmit() {
      this.$refs.suggestFormRef.validate(async (valid) => {
        if (!valid) {
          this.$message({
            message: '请填入必填项',
            type: 'error'
          })
          return
        }
        const { data } = await this._axios.post(`/suggest/modifysuggest`, {
          createDate: new Date(),
          questionDesc: this.suggestForm.content,
          questionTelephone: this.suggestForm.tel,
          questionImgUrls: this.suggestForm.imgUrl
        })

        if (data.code !== 'ok') {
          this.$message({
            message: data.message,
            type: 'error'
          })
          return
        }
        this.$message({
          message: data.message,
          type: 'success'
        })
        this.suggestVisi = false
        this.$refs.suggestFormRef.resetField()
        location.reload()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  float: right;
  margin: 30px 0 50px;
  margin-right: 28px;
}
</style>
